<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TCES</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="layui/css/layui.css">
	<link rel="stylesheet" href="css/login.css">
	<script src="js/jquery-3.4.0.min.js"></script>
	<script src="layui/layui.all.js"></script>
</head>

<body>
	<div class="frame">
		<div class="login_border">
			<h2>TCES</h2>
			<form name="f" method="post">
				<div class="input_outer">
					<span class="glyphicon glyphicon-user"></span>
					<select name="role" class="text" style="color: white" id="select">
						<option class="text" value="" style="color: gray">----请选择身份----</option>
						<option value="0" style="color: black;">系统管理员</option>
						<option value="1" style="color: black">教师</option>
						<option value="2" style="color: black">学生</option>
					</select>
				</div>
				<div class="input_outer">
					<span class="glyphicon glyphicon-user"></span>
					<input name="userId" id="userId" class="text" onkeyup="value=value.replace(/[^\d]/g,'')" style="color: #FFFFFF !important" type="text" placeholder="请输入用户ID">
				</div>
				<div class="input_outer">
					<span class="glyphicon glyphicon-lock"></span>
					<input name="password" id="password" class="text" style="color: #FFFFFF !important; position:absolute; z-index:100;"value="" type="password" placeholder="请输入密码">
				</div>
				<button type="button"  
						style="width: 330px; height: 50px; margin-bottom: 20px;
							background-color: #0096e6; border: none; line-height: 20px;
							text-align: center; font-size: 20px; border-radius: 50px; color: white;">登录</button>
			</form>
		</div>
	</div>
	<script>
		$(function() {
			layui.use('layer',function(){
				$("button").on(
						"mouseover",
						function() {
							var select = $("#select option:checked").text();
							var userId = $("#userId").val();
							var password = $("#password").val();
							if (select == "----请选择身份----" || userId == ""
									|| password == "" ) {
								$(this).attr('class','layui-btn-disabled');
								layer.tips('请填写完整', 'button', {
									tips : [ 2, '#3595CC' ]
								});
								
							}else{
								$(this).removeAttr('class');
							}
						})
						
				$("button").on("mouseout",function() {
						layer.closeAll('tips');	
					
				})	
						
						
				$("button").on("click", function(){
					
					var select = $("#select option:checked").text();
					var userId = $("#userId").val();
					var password = $("#password").val();
					
					$.ajax({
						type:"post",
		                  type: "Post",
		                  url: "/Checklogin",
		          	      dataType:"json",
		        		  async:false,
		                  data: {
		                	  "userId":userId,
		                	  "password":password,
		                	  "select":select
		                        },
		                  success:function(data){
		                	 if(data.msg == "学生"){

		                		 window.location.href="/Student";
		                		 
		                	 }else if(data.msg == "教师"){
		                		 
		                		 window.location.href="/Teacher";
		                		 
		                	 }else if(data.msg == "管理员"){
		                		 
		                		 window.location.href="/Admin_index";
		                		 
		                	 }else if(data.msg == "NO"){
		                		 alert("账号已被登陆");
		                		 $("input").val("");
		                	 }else{
		                		 alert("输入账号或密码有误");
		                		 $("input").val("");
		                		
		                	 }
		                  }
					});
				})
			})
			
			
			 
		})
		
		
	</script>
</body>
</html>